<template>
  <div>
    <div style="margin-bottom: 10px;">
      <!--面包屑-->
      <a-breadcrumb>
        <a-breadcrumb-item href="">
          <a-icon type="home" />  首页
        </a-breadcrumb-item>
        <a-breadcrumb-item>
          供货结算
        </a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <!--搜索框-->
    <div style="width: 40%;display: flex;justify-content: space-between">
      <a-input v-model="queryParams.inventorySeq" allow-clear placeholder="请输入库存批次编号"  style="width: 150px">
      </a-input>
      <div>
        <a-select
            show-search
            allow-clear
            placeholder="审核状态"
            option-filter-prop="children"
            style="width: 150px"
            @change="handleSelect"
        >
          <a-select-option value="1">
            结算通过
          </a-select-option>
          <a-select-option value="0">
            结算失败
          </a-select-option>
        </a-select>
      </div>
      <a-button type="primary"  @click="onSearch" icon="search" style="width:85px;color: white">
        查询
      </a-button>
      <br /><br />
    </div>
    <!--数据表格-->
    <div>
      <a-table
          :columns="columns"
          :data-source="orders"
          :scroll="{y: 600 }"
          :loading="loading"
          :pagination="pagination"
          :current="pagination.current"
          @change="tableChange"
          bordered
          style="align-content: center"
      >
        <template
            slot="action"
            slot-scope="record"
        >
          <div style="display: flex;justify-content: space-around">
            <a-button
                slot="action"
                type="primary"
                @click="getInfo(record)"
            >订单详情
            </a-button>
          </div>

        </template>
      </a-table>
      <!--详情页面-->
      <div>
        <a-drawer
            title="审核"
            :width="720"
            :visible="visible"
            :body-style="{ paddingBottom: '80px' }"
            @close="onClose"
        >
          <a-form :form="form" layout="vertical" hide-required-mark>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="商品名称">
                  <a-input />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="采购编号">
                  <a-input

                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="类型">
                  <a-input

                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="规格">
                  <a-input

                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="数量">
                  <a-input

                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="时间">
                  <a-input

                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="审核状态">
                  <a-select>
                    <a-select-option value="未审核"> 未审核 </a-select-option>
                    <a-select-option value="已通过"> 已通过 </a-select-option>
                    <a-select-option value="未通过"> 未通过 </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
          <div :style="{
                                      position: 'absolute',
                                      right: 0,
                                      bottom: 0,
                                      width: '100%',
                                      borderTop: '1px solid #e9e9e9',
                                      padding: '10px 16px',
                                      background: '#fff',
                                      textAlign: 'right',
                                      zIndex: 1,
                                    }"
          >
            <a-button type="primary" @click="onClose">
              关闭
            </a-button>
          </div>
        </a-drawer>
        <a-modal
            title="审核"
            :visible="modelVisible"
            :dialog-style="{ top: '20px' }"
            :width="720"
            okText="确认"
            cancelText="取消"
            @ok="modelHandleOk()"
            @cancel="modelCancel()"
        >
          <a-form :form="form" layout="vertical" hide-required-mark>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="商品名称">
                  <a-input />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="采购编号">
                  <a-input

                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="类型">
                  <a-input

                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="规格">
                  <a-input

                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="数量">
                  <a-input

                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="时间">
                  <a-input

                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="审核状态">
                  <a-select>
                    <a-select-option value="未审核"> 未审核 </a-select-option>
                    <a-select-option value="已通过"> 已通过 </a-select-option>
                    <a-select-option value="未通过"> 未通过 </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-modal>
      </div>
    </div>
  </div>
</template>

<script>
import {getOrders, getOrdersByParams} from '@/services/order/supplier_settlement_order'

const columns = [
  { title: '订单ID', width: '7%', dataIndex: 'settlementId', key: 'orderSn', align: 'center' },
  { title: '库存批次', width: '14%', dataIndex: 'inventorySeq', key: 'age', align: 'center' },
  { title: '结算类型', dataIndex: 'settlementTypeStr', key: '1', width: '12.5%', align: 'center' },
  { title: '结算金额', dataIndex: 'settlementAmount', key: '2', width: '11.5%', align: 'center' },
  { title: '结算状态', dataIndex: 'settlementStatusStr', key: '2', width: '10%', align: 'center' },
  { title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: '13.5%', align: 'center' },
  { title: '结算时间', dataIndex: 'updateTime', key: 'updateTime', width: '13.5%', align: 'center' },
  {
    title: '操作',
    align: 'center',
    key: 'operation',
    width: '10.5%',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  name: "SupplierSettlementOrder.vue",
  data(){
    return {
      columns,
      loading: false,
      orders: [],
      queryParams:{
        inventorySeq:'',
        settlementStatus:'',
      },
      pagination: {
        total: 0,
        current: 1,
        defaultPageSize: 4,
        showSizeChanger: true,
        pageSizeOptions: ['5', '15', '30', '50']
      }
    }
  },
  created() {
    this.render_table_data();
  },
  methods: {
    /*
   获取订单数据
     */
    async render_table_data(){
      this.loading = true;
      let resp = await getOrders();
      this.loading = false;
      this.orders = resp;
    },
    async onSearch(){
      this.loading = true;
      let res = await getOrdersByParams(this.queryParams);
      this.loading = false;
      this.orders = res;
    },
    /**
     *  监听table变化,更新当前页码
     */
    tableChange (e) {
      this.pagination.current = e.current
    },
    /*
    选择查询订单状态
     */
    handleSelect(value) {
      this.queryParams.settlementStatus=value;
    },
  }
}
</script>

<style scoped>

</style>